<template>
  <div class="theme-switch">
    <el-switch
      ref="switchRef"
      :model-value="isDarkMode"
      @click="handleSwitchClick"
      :active-icon="Moon"
      :inactive-icon="Sunny"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Moon, Sunny } from '@element-plus/icons-vue'
import { useTheme } from '@/hooks/useTheme'

// 使用主题管理hook
const { isDarkMode, toggleTheme } = useTheme()

// switch 元素引用
const switchRef = ref()

// 处理 switch 点击事件
const handleSwitchClick = (event) => {
  // 阻止 el-switch 的默认切换行为
  event.preventDefault()
  event.stopPropagation()
  
  // 获取 switch 元素的真实位置
  const switchElement = switchRef.value?.$el
  let clientX = event.clientX
  let clientY = event.clientY
  
  // 如果无法从事件获取坐标，则计算 switch 中心点
  if (!clientX || !clientY) {
    if (switchElement) {
      const rect = switchElement.getBoundingClientRect()
      clientX = rect.left + rect.width / 2
      clientY = rect.top + rect.height / 2
    } else {
      clientX = window.innerWidth / 2
      clientY = window.innerHeight / 2
    }
  }
  
  // 创建包含真实坐标的事件对象
  const mockEvent = {
    clientX,
    clientY
  }
  
  // 调用原有的 toggleTheme 函数，保持所有逻辑不变
  toggleTheme(mockEvent)
}
</script>

<style lang="scss" scoped>
.theme-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  
  .el-switch {
    position: relative;
    
    // 隐藏默认的 active-icon 和 inactive-icon
    :deep(.el-switch__label) {
      display: none !important;
    }
    
    :deep(.el-switch__core) {
      border: var(--theme-switch-border);
      background-color: var(--theme-switch-bg) !important;
      position: relative;
      overflow: visible;
      width: 55px !important;
      height: 24px !important;
      border-radius: 12px !important;
      
      // 隐藏默认图标
      .el-switch__inner {
        display: none;
      }
      
      // Sunny 图标 - 在右侧（action后面）
      &::after {
        content: '';
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        background-image: url('@/assets/icons/ico-white.png');
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 1;
        transition: opacity 0.3s ease;
        z-index: 1;
      }
      
      // Moon 图标 - 在左侧（action前面）
      &::before {
        content: '';
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        background-image: url('@/assets/icons/ico-black.png');
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1;
      }
    }
    
    // 自定义滑块颜色
    :deep(.el-switch__action) {
      background-color: #007AFF !important;
      z-index: 2;
    }
    
    // 当开关打开时（暗黑模式 - Moon）
    &.is-checked {
      :deep(.el-switch__core) {
        // 显示 Moon 图标（在滑块前面），隐藏 Sunny 图标
        &::before {
          opacity: 1;
        }
        &::after {
          opacity: 0;
        }
      }
    }
    
    // 当开关关闭时（亮色模式 - Sunny）
    &:not(.is-checked) {
      :deep(.el-switch__core) {
        // 显示 Sunny 图标（在滑块后面），隐藏 Moon 图标
        &::before {
          opacity: 0;
        }
        &::after {
          opacity: 1;
        }
      }
    }
  }
}
</style> 